<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
</head>
<style>
    html,
    body {
        background-color: #fff;
    }

    .placeholder_div {
        background-color: #fbf9f9;
    }
</style>

<body>
    <div  id="app" v-cloak>
        <div class="placeholder_div"></div>

    </div>
</body>

</html>
<script src="../script/set_root.js"></script>

<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript" src="../script/hb.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript">
    apiready = function () {
        hb_ready();

        // var tencentIm = api.require('tencentIm');
        // tencentIm.init({}, function (ret, err) {
        //     if (ret) {
        //         alert(JSON.stringify(ret));
        //     } else {
        //         alert("网络不通畅，请稍后再试！");
        //     }
        // });

        var UIChatBox = api.require('UIChatBox');
        UIChatBox.open({
            placeholder: '',
            maxRows: 4,
            emotionPath: 'widget://res/img/emotion',
            texts: {
                recordBtn: {
                    normalTitle: '按住说话',
                    activeTitle: '松开结束'
                },
                sendBtn: {
                    title: '发送'
                }
            },
            styles: {
                inputBar: {
                    borderColor: '#d9d9d9',
                    bgColor: '#f2f2f2'
                },
                inputBox: {
                    borderColor: '#B3B3B3',
                    bgColor: '#FFFFFF'
                },
                emotionBtn: {
                    normalImg: 'widget://res/img/chatBox_face1.png'
                },
                extrasBtn: {
                    normalImg: 'widget://image/icon_chat_more.png'
                },
                keyboardBtn: {
                    normalImg: 'widget://res/img/chatBox_key1.png'
                },
                speechBtn: {
                    normalImg: 'widget://image/icon_chat_yuyin.png'
                },
                recordBtn: {
                    normalBg: '#c4c4c4',
                    activeBg: '#999999',
                    color: '#000',
                    size: 14
                },
                indicator: {
                    target: 'both',
                    color: '#c4c4c4',
                    activeColor: '#9e9e9e'
                },
                sendBtn: {
                    titleColor: '#fff',
                    bg: '#66CD00',
                    activeBg: '#fff',
                    titleSize: 14
                }
            },
            extras: {
                titleSize: 12,
                titleColor: '#565656',
                btns: [{
                    title: '图片',
                    normalImg: 'widget://image/icon_chat_camera.png',
                    activeImg: 'widget://image/icon_chat_camera.png'
                }, {
                    title: '拍照',
                    normalImg: 'widget://image/icon_chat_photo.png',
                    activeImg: 'widget://image/icon_chat_photo.png'
                }, {
                    title: '语音通话',
                    normalImg: 'widget://image/icon_chat_camera.png',
                    activeImg: 'widget://image/icon_chat_camera.png'
                }, {
                    title: '视频通话',
                    normalImg: 'widget://image/icon_chat_photo.png',
                    activeImg: 'widget://image/icon_chat_photo.png'
                }]
            }
        }, function (ret, err) {
            if (ret) {
                // alert(JSON.stringify(ret));
            } else {
                // alert("网络不通畅，请稍后再试！");
            }
        });
    }
    //使用vue对数据进行绑定
    var app = new Vue({
        el: '#app',
        data: {

        },
        methods: {

        },
        created () {
            // alert("qqqqq")
        }
    })
</script>